<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
  <!-- 必须的 meta 标签 -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <title>GameHub商城</title>
  <!-- Bootstrap 的 CSS 文件 -->
  <link rel="stylesheet" href="${pageContext.request.contextPath}/font/stylesheet.css">
  <link rel="stylesheet" href="${pageContext.request.contextPath}/frame/css/bootstrap.min.css" >
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/global.css">
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/gamepage.min.css">
  <script src="${pageContext.request.contextPath}/js/jquery-3.5.1.min.js" ></script>
  <script src="${pageContext.request.contextPath}/js/bootstrap.bundle.min.js"></script>
  <script>
    function choose(obj){
      var $checkbox = $(obj);
      var $input = $checkbox.closest(".count-box").find("input")
      var $text = $checkbox.text();
      event.stopPropagation();
      if($text == "-" && $input.val() > 0) {
        $input.val(parseInt($input.val())-1)
      }else if($text == "+") {
        $input.val(parseInt($input.val())+1)
      }
    }
  	function addCart(){
  		$.get("${pageContext.request.contextPath}/cart/addCart",{"gid":${game.id},"count":$("#game_count").val()},function(data){
  			alert(1)
  		},"json")
  	}
  </script>
</head>
<body>
  <!-- 头部导航标签 -->
  <nav class="navbar navbar-expand-lg ">
    <a class="navbar-brand" href="#"><img src="../img/logo.png" alt="" height="40px" class="d-inline-block align-top"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarText">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">商城 <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">榜单</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">帮助</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">常见问题</a>
        </li>
      </ul>
          <a href="${pageContext.request.contextPath}/pages/regest.jsp" class="navbar-text">注册</a>
          <c:if test="${not empty user}">
            <a href="${pageContext.request.contextPath}/user/exit" class="navbar-text">退出账户</a>
          </c:if>
          <c:if test="${empty user}">
            <a href="${pageContext.request.contextPath}/pages/login.jsp" class="navbar-text">登录</a>
          </c:if>
    </div>
  </nav>
  <!-- 搜索和商城导航栏 -->
  <div class="container mx-auto px-0 mb-2 sticky-top" id="banner-search">
    <div class="row px-0">
      <div class="col-md-1"></div>
      <nav class="col-lg-10 col-md-10 navbar navbar-expand-lg px-0" id="test">
        <a class="navbar-brand" href="#">
          <div class="input-group">
            <div class="input-group-prepend">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
                <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
              </svg>
              <!-- <span class="input-group-text" id="basic-addon1">@</span> -->
            </div>
            <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
          </div>
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarText">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <a class="nav-link" href="#">探索 <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">浏览</a>
            </li>
          </ul>
              <c:if test="${not empty user}">
                <span class="navbar-text">欢迎${user.username}</span>
                <a href="${pageContext.request.contextPath}/pages/personal.jsp" class="navbar-text">个人中心</a>
                <a class="navbar-text">愿望清单</a>
                <a href="${pageContext.request.contextPath}/cart/getUserCart" class="navbar-text">购物车<span class="badge badge-light ml-1">4</span></a>
              </c:if>
        </div>
      </nav>
      <div class="col-md-1"></div>
    </div>
  </div>
  <main class="container mx-auto px-0 " >
    <div class="row px-0 ">
      <div class="col-1"></div>
      <!-- 页面主体 -->
      <div class="col-10">
        <!-- 游戏标题 -->
        <div class="row game-title  py-3">
          <div class="col p-0">
            ${game.game_name}
          </div>
        </div>
        <!-- 游戏详情 -->
        <div class="row game-details">
          <div class="col d-flex flex-row p-0">
            <div class="flex-grow-1" id="desc-box">
              <!-- 游戏图片滚动窗 -->
              <div class="row">
                <div class="col">
                  <img src="${game.detail_srcs[0]}" class="w-100 rounded" alt="">

                </div>
              </div>
              <!-- 游戏介绍 -->
              <div class="row game-descs">
                <div class="col game-texts">
                  <h4 class="subtitle">在这款回合制角色扮演游戏中，征服外国土地、穿透政治迷局，挥斥方遒，决定罗马的命运。在每项决定都很重要的故事中，直面罗马禁卫军队伍，率领军团夺取胜利，选择走出自己的道路。</h4>
                  <div class="row ml-0 game-types">
                    <div class="col">
                      <div class="d-flex flex-column ">
                        <span>游戏类型</span>
                        <div>
                          <c:forEach items="${game.game_types}" var="type" varStatus="stat">
	                          <a href="">${type}</a>
	                          <c:if test="${not stat.last}">
		                   		<span>,</span>                          	
                        	  </c:if>                        	
                          </c:forEach>
                        </div>
                      </div>
                    </div>
                    <div class="col">
                      <div class="d-flex flex-column">
                      	<span>功能</span>
                      	<div>
	                      	<c:forEach items="${game.game_functions}" var="functions" varStatus="stat">
	                        	<a href="">${functions}</a>
	                        	<c:if test="${not stat.last}">
			                   		<span>,</span>                          	
	                        	</c:if>
	                        </c:forEach>
                      	</div>
                      </div>
                    </div>
                  </div>
                  <h2 class="h2">《Expeditions: Rome》</h2>
                  <strong class="strong">罗马的未来尽在你的掌控：你会留下何等的丰功伟绩？</strong>
                  <p class="pra">扮演年轻的军团长。在父亲被一个未知的政治对手谋杀后，他被迫逃离罗马，在镇压希腊叛乱的军事行动中寻求庇护。一步一步，在战斗的洗礼中，你不断提高自己的军事实力，强化自身的力量，终于成为了人人都敬畏的军团长。</p>
                  <p class="pra">在《Expeditions: Rome》中，你将登上世界舞台，从希腊的蓝色海岸，到高卢的幽深森林，指点江山，运筹帷幄，张扬罗马的意志。世人对你，还有罗马的看法由你来决定。你会铁拳出击，还是巧舌如簧？你会继承共和国的政治遗产，还是穿透罗马元老院的政治谜团，走出属于自己的道路？在你决定你的军团、亲密伙伴，以及罗马的命运之时，每个选择都举足轻重。</p>
                  <h2 class="h2">特色</h2>
              </div>
              </div>
            
            </div>
            <aside class=" flex-shrink-0 position-relative">
              <div class=" sticky-top">

                <div class="logo">
                  <img src="../img/egs-expeditionsrome-logicartists-ic1-400x300-a915a12a9538.png" class="img-fluid" alt="">
                </div>
                <span class="badge badge-secondary py-2 px-2">基础游戏</span>
                <c:if test="${game.game_discount == 'no discount'}">
                	<div class="my-auto text-white">￥${game.game_final_price}</div>
                </c:if>
                <c:if test="${game.game_discount != 'no discount'}">
	                <div class="d-flex flex-col">
	                  <div class="rounded px-2 py-1" style="background-color: #FF9900;">${game.game_discount}%</div>
	                  <div class="d-flex flex-col">
	                    <div class="my-auto mx-1 discount">￥${game.game_original_price}</div>
	                    <div class="my-auto text-white">￥${game.game_final_price}</div>
	                  </div>
	                </div>
                </c:if>
                <nav class="d-flex flex-row count-box">
                  <div class="btn btn-light py-0" onclick="choose(this)">-</div>
                  <input id="game_count" type="number" class="form-control" name="count" value="1" oninput="this.value = this.value.replace(/[^0-9]/g, '');">
                  <div class="btn btn-light py-0" onclick="choose(this)">+</div>
                </nav>
                <div type="button" class="btn btn-primary p-0 d-block" onclick="buyNow">立即购买</div>
                <div type="button" class="btn btn-primary p-0 d-block bg-transparent" onclick="addCart()">加入购物车</div>
                <div type="button" class="btn btn-primary p-0 d-block bg-transparent">添加至愿望单</div>
                <ul class="d-flex flex-column">
                  <c:if test="${not empty game.supplyer.developer}">
                   	<li class="d-flex flex-row justify-content-between">
                    	<span>开发商</span>
                    	<span>${game.supplyer.developer}</span>
                  	</li>
                  </c:if>
                  <c:if test="${not empty game.supplyer.publisher}">
                   	<li class="d-flex flex-row justify-content-between">
                    	<span>发行商</span>
                    	<span>${game.supplyer.publisher}</span>
                  	</li>
                  </c:if>
                  <c:if test="${not empty game.supplyer.releaseDate}">
                   	<li class="d-flex flex-row justify-content-between">
                    	<span>发布日期</span>
                    	<span>${game.supplyer.releaseDate}</span>
                  	</li>
                  </c:if>
                  <c:if test="${not empty game.supplyer.firstDate}">
                   	<li class="d-flex flex-row justify-content-between">
                    	<span>首发日期</span>
                    	<span>${game.supplyer.firstDate}</span>
                  	</li>
                  </c:if>
                  <c:if test="${not empty game.supplyer.platform}">
                   	<li class="d-flex flex-row justify-content-between">
                    	<span>平台</span>
                    	<span>${game.supplyer.platform}</span>
                  	</li>
                  </c:if>
                </ul>
              </div>
            </aside>
          </div>
        </div>
        <div class="row">
          <div class="col game-property">
            <div class="row">
              <h2 class="subtitle">配置</h2>
            </div>
            <div class="row">
              <div class="col propertybox rounded">
                <div class="row m-0 property-title">
                  <span>WINDOWS</span>
                </div>
                <div class="row property-subtitle color-title">
                  <div class="col">最低配置</div>
                  <div class="col">推荐配置</div>
                </div>
                <c:if test="${not empty game.computer_low.os}">
	                <div class="OS line">
	                  <div class="row color-title">
	                    <div class="col">操作系统</div>
	                    <div class="col">操作系统</div>
	                  </div>
	                  <div class="row">
	                    <div class="col">${game.computer_low.os}</div>
	                    <div class="col">${game.computer_high.os }</div>
	                  </div>
	                </div> 
                </c:if>
                <c:if test="${not empty game.computer_low.cpu}">
	                <div class="OS line">
	                  <div class="row color-title">
	                    <div class="col">处理器</div>
	                    <div class="col">处理器</div>
	                  </div>
	                  <div class="row">
	                    <div class="col">${game.computer_low.cpu}</div>
	                    <div class="col">${game.computer_high.cpu }</div>
	                  </div>
	                </div> 
                </c:if>
                <c:if test="${not empty game.computer_low.gpu}">
	                <div class="OS line">
	                  <div class="row color-title">
	                    <div class="col">显卡</div>
	                    <div class="col">显卡</div>
	                  </div>
	                  <div class="row">
	                    <div class="col">${game.computer_low.gpu}</div>
	                    <div class="col">${game.computer_high.gpu }</div>
	                  </div>
	                </div> 
                </c:if>
                <c:if test="${not empty game.computer_low.vRam}">
	                <div class="OS line">
	                  <div class="row color-title">
	                    <div class="col">显存</div>
	                    <div class="col">显存</div>
	                  </div>
	                  <div class="row">
	                    <div class="col">${game.computer_low.vRam}</div>
	                    <div class="col">${game.computer_high.vRam }</div>
	                  </div>
	                </div> 
                </c:if>
                <c:if test="${not empty game.computer_low.ram}">
	                <div class="OS line">
	                  <div class="row color-title">
	                    <div class="col">内存</div>
	                    <div class="col">内存</div>
	                  </div>
	                  <div class="row">
	                    <div class="col">${game.computer_low.ram}</div>
	                    <div class="col">${game.computer_high.ram }</div>
	                  </div>
	                </div> 
                </c:if>
                <c:if test="${not empty game.computer_low.storage}">
	                <div class="OS line">
	                  <div class="row color-title">
	                    <div class="col">硬盘空间</div>
	                    <div class="col">硬盘空间</div>
	                  </div>
	                  <div class="row">
	                    <div class="col">${game.computer_low.storage}</div>
	                    <div class="col">${game.computer_high.storage }</div>
	                  </div>
	                </div> 
                </c:if>
                <c:if test="${not empty game.computer_low.directX}">
	                <div class="OS line">
	                  <div class="row color-title">
	                    <div class="col">Direct X</div>
	                    <div class="col">Direct X</div>
	                  </div>
	                  <div class="row">
	                    <div class="col">${game.computer_low.directX}</div>
	                    <div class="col">${game.computer_high.directX }</div>
	                  </div>
	                </div> 
                </c:if>
                <c:if test="${not empty game.computer_low.vioceCard}">
	                <div class="OS line">
	                  <div class="row color-title">
	                    <div class="col">声卡</div>
	                    <div class="col">声卡</div>
	                  </div>
	                  <div class="row">
	                    <div class="col">${game.computer_low.vioceCard}</div>
	                    <div class="col">${game.computer_high.vioceCard }</div>
	                  </div>
	                </div> 
                </c:if>
                <c:if test="${not empty game.computer_low.displayResolution}">
	                <div class="OS line">
	                  <div class="row color-title">
	                    <div class="col">分辨率</div>
	                    <div class="col">分辨率</div>
	                  </div>
	                  <div class="row">
	                    <div class="col">${game.computer_low.displayResolution}</div>
	                    <div class="col">${game.computer_high.displayResolution }</div>
	                  </div>
	                </div> 
                </c:if>
                <c:if test="${not empty game.computer_low.controller}">
	                <div class="OS line">
	                  <div class="row color-title">
	                    <div class="col">外设</div>
	                    <div class="col">外设</div>
	                  </div>
	                  <div class="row">
	                    <div class="col">${game.computer_low.controller}</div>
	                    <div class="col">${game.computer_high.controller }</div>
	                  </div>
	                </div> 
                </c:if>

                <c:if test="${not empty game.computer_low.account}">
	                <div class="OS line">
	                  <div class="row color-title">
	                    <div class="col">账户</div>
	                    <div class="col">账户</div>
	                  </div>
	                  <div class="row">
	                    <div class="col">${game.computer_low.account}</div>
	                    <div class="col">${game.computer_high.account }</div>
	                  </div>
	                </div> 
                </c:if>
                <c:if test="${not empty game.computer_low.net}">
	                <div class="OS line">
	                  <div class="row color-title">
	                    <div class="col">网络</div>
	                    <div class="col">网络</div>
	                  </div>
	                  <div class="row">
	                    <div class="col">${game.computer_low.net}</div>
	                    <div class="col">${game.computer_high.net }</div>
	                  </div>
	                </div> 
                </c:if>
                <div class="Languages">
                  <div class="row">
                    <div class="col">
                      <div class="color-title">
                        支持的语言
                      </div>
                      <div class="row">
                        <div class="col">
                            <c:if test="${not empty game.game_audio}">
		                          <div class="row">
		                            <div class="col d-flex flex-row">
                              			<span>语音：</span>
		                              	<c:forEach items="${game.game_audio}" var="audio">
		                              		<span class="px-1">${audio}</span>
                              			</c:forEach>                            	
		                            </div>
		                          </div>
                            </c:if>
                            <c:if test="${not empty game.game_langueages}">
		                          <div class="row">
		                            <div class="col d-flex flex-row">
                              			<span>文本：</span>
		                              	<c:forEach items="${game.game_langueages}" var="language">
		                              		<span class="px-1">${language}</span>
                              			</c:forEach>                            	
		                            </div>
		                          </div>
                            </c:if>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="divide"></div>
                <div class="copyright color-title text-center">
                  <div>${game.game_privacy}</div>
                  <a href="">隐私政策</a>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>

      <div class="col-1"></div>
    </div>
  </main>
</body>
</html>